<template>
    <div class="box">
        <header class="header">
          <ul>
            <li @click="back"><i class="iconfont icon-arrow-right-copy-copy"></i></li>
            <li><h5>成就</h5></li>
            <li>
            <router-link to="/achieveAll" tag="p">全部</router-link>
            </li>
          </ul>
        </header>
        <div class="content">
          <div class="ach_con">
            <div class="img">
              <!-- <img src="@/../static/05.jpg" alt=""> -->
              <img src="@/../static/06.jpg" alt="">
            </div>
            <div class="ach_detail">
              <h4>第一次叫妈妈</h4>
              <p>宝宝1岁2个月是18天了，第一次明确的在喊妈妈了，心都给我萌化了。</p>
              <router-link to="/achieveAll" tag="button">查看更多</router-link>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'Achieve',
  data () {
    return {
      achievelist: []
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
  // created () {
  //   axios.get('sgj/photow/').then(data => {
  //     console.log(data)
  //     console.log(data.data.returnValue[1])
  //     this.achievelist=data.data.returnValue[1]
  //   })
  // }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  @include rect(100%, 40px);
  @include background-color(#56A5E8);
  ul {
    @include rect (95%, 100%);
    // background:red;
    margin:0 auto;
    @include flexbox();
    @include justify-content(space-between);
    @include align-items();
    li {
      i{
        @include font-size(15px);
        @include text-color(white);
      }
      h5 {
        @include font-size(15px);
        @include text-color(white);
        @include font-weight(100);
      }
      p{
        @include font-size(15px);
        @include text-color(white);
      }
    }
  }
}
.ach_con {
  @include rect(70%, 510px);
  @include margin(40px 15%);
  @include background-color(#ececec);  
  .img{
    @include rect(100%, 50%);
    // background:red;
    @include flexbox();
    @include justify-content();
    @include align-items();
    img{
      @include rect(100%, auto);
    }
  }
  .ach_detail{
    @include rect(100%, auto);
    @include flexbox();
    @include justify-content();
    @include align-items();
    @include flex-direction(column);
    h4 {
      @include rect(96px, 22px);
      color:#666;
      font-size: 16px;
      margin:10px 0;
    }
    p {
      @include rect(90%, 40px);
      color:#999;
      font-size: 14px;
    }
    button {
      @include rect(50%, 30px);
      color:#666;
      background:#cacaca;
      font-size: 14px;
      border-radius: 40px;
      border:0;
      margin-top:50px;
    }
  }
}
.header{
  background: #56A5E8
}
</style>
